import React from 'react';
import './check.scss';
import ImageLoadable from "components/plugins/imageLoading/imageLoading";
import {LinkSelectable} from "components/data/react-element";
import {RouterList} from "@/routers/router-list";
import {DictController} from "api/dict";
import {REQUEST_STATE} from "fetchState";
import {observer} from "mobx-react";
import {observable} from "mobx";

@observer
class ColumnItemExpert extends React.Component {
    #MemberLevelList = DictController.GetMemberLevel();
    @observable SkillsList = [];
    @observable IndustryList = [];

    componentDidMount() {
        this.getSkillsList();
        this.getIndustry();
    }

    async getSkillsList() {
        let {CODE, DATA, STATUS} = await DictController.GetSkillsList();
        if (CODE === REQUEST_STATE.CANCEL) {
            return;
        }

        if (STATUS === 0) {
            this.SkillsList = DATA;
        }
    }

    async getIndustry() {
        let {CODE, DATA, STATUS} = await DictController.GetIndustryList();
        if (CODE === REQUEST_STATE.CANCEL) {
            return;
        }

        if (STATUS === 0) {
            this.IndustryList = DATA;
        }
    }

    render() {
        let {item} = this.props;
        let {
            Id,
            TrueName,
            OrgName,
            // OrgType,
            Industry,
            Skills,
            ImgUrl,
            MemberLevel,
            Title,
            To = RouterList.info.expert(Id)
        } = item || {};

        // let skillsName = this.SkillsList.find(x => x.Id === Skills)?.Name;
        let industryName = this.IndustryList.find(x => x.Id === Industry)?.Name;
        let memberLevelString = this.#MemberLevelList.find(x => x.Id === MemberLevel)?.Name;

        return (
            <LinkSelectable to={To} className={"column-item-expert flex-start"}>
                <ImageLoadable className={"item"} src={ImgUrl}/>
                <div className="info">
                    <div className="name font-size-32">
                        <span>{TrueName || '--'}</span>
                        <span className="type font-size-36">{memberLevelString || <>&nbsp;</>}</span>
                    </div>
                    <div className="worker font-size-28">
                        <span className="company">{OrgName || <>&nbsp;</>}</span>
                        <span className="ui">{Title || <>&nbsp;</>}</span>
                    </div>
                    <div className="work-type font-size-22">
                        <span>{industryName || '--'}</span>
                        {/*<span>{skillsName || '--'}</span>*/}
                        <span>{Skills || '--'}</span>
                    </div>
                </div>
            </LinkSelectable>
        );
    }
}

class ColumnItemPersonnel extends React.Component {
    render() {
        let {
            item = {}
        } = this.props;

        return <ColumnItemExpert {...this.props} item={{
            ...item,
            MemberLevel: item.Level,
            To: RouterList.info.personnel(item.Id)
        }}/>
    }
}

export {
    ColumnItemExpert,
    ColumnItemPersonnel
}